<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播小圆点</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			h3{
				margin-left: 20px;
			}
			div{
				margin-left: 20px;
				overflow: hidden;
				margin-top: 20px;
			}
			div ul{
				list-style: none;
			}
			div ul li{
				float: left;
				margin-right: 10px;
				background-color: red;
				width:20px;
				height: 20px;
				border-radius: 10px;
			}
			/*默认小圆点选中是蓝色，谁身上有事件 ，谁就带这个样式。*/
			div ul li.cur{
				background-color: blue;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				//得到h3标签
				var my_result = document.getElementById("result");
				//得到所有的li标签
				var myli=document.getElementById("lunbo").getElementsByTagName("li");
				
				for(var i=0;i<=myli.length-1;i++){
					myli[i].index=i;   //先记住自己的位置 
					
					myli[i].onmouseover=function(){
						//1改变标题（h3）中的内容为当前（事件源）li的下标
						my_result.innerHTML=this.index;
						//2改变自己的颜色(改变cur的位置 )
//						排它操作           //先让所有的人都不带cur
					     for(var j=0;j<=myli.length-1;j++){
					     	myli[j].className="";
					     }
					     this.className="cur";
					}
				}
			}
		</script>
	</head>

	<body>
		<h3 id="result">0</h3>
		<div id="lunbo">
			<ul >
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>

</html>